<template>
	<view class="content">
		<view class="site_seek">
			<view class="site">
			</view>
			<view class="seek">
				<image src="../../static/tabs/lb.png" mode=""></image>
				<input type="text" value="123456" />
			</view>
		</view>
		<view class="list">
			<view class="nav">
				<view class="nav_item" v-for="(item,index) in navs" :key="index" @click="navItemClick(item.path)">
					<image :src="item.img" mode="" />
					<text>{{item.title}}</text>
				</view>
			</view>
		</view>
		<view class="slideshow" @click="groupbooking">
			<swiper indicator-dots circular autoplay>
				<swiper-item>
					<image src="../../static/logo.png" mode="" ></image>
				</swiper-item>
				<swiper-item>
					<image src="../../static/logo.png" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
<!-- 		<view class="commoditylist">
			<view class="commodityitem">
				<view class="listone">
					<image src="../../static/tabs/details_img.png" mode=""></image>

					<view class="three">
						<text style="margin-right: 10rpx;">平台签约门店</text>
						<image src="../../static/tabs/bao.png" mode=""></image>
						<text style="margin-left: 10rpx;color: rgba(16, 16, 16, 100);">1.8km</text>
					</view>
					<view class="twoan">
						<view class="anone">
							<text>先装修后支付</text>
						</view>
						<view class="antwo">
							<text>样板间</text>
						</view>
					</view>
				</view>
			</view>
		</view> -->
		
		
			<van-tabs @click="onClick">
				<van-tab  v-for="(item,index) in categorys" :key="index" :title="item.categoryName" :name="item.categoryId"></van-tab>			
			</van-tabs>
		<!--    <view :class="{'my-tabs':true,'space-between':formatBe}" >
		    	<view  v-for="(item,index) in categorys" :key="index" :class="{'tab-item':true,'active':activeIndex==index}" @tap="tap(index,item.categoryId)">
		    		{{item.categoryName}}
		    	</view>s
				<van-icon name="apps-o" size="1000" @click="toCategory"/>
		    </view> -->
				<view  class="material-list-grid"  style="width: 45.5%;" v-for="(product,index) in productCategory" :key="product.index" @click="toDetails(product.productId)">
					<image style="width: 150px;height: 150px;" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
					<view  class="material-list-grid-content">
						<view align="left" style="background-color: gainsboro;border-radius: 1rem">
							<!-- 修改 -->
								<!-- <van-image style="float: left;margin-top: 0.25rem;margin-left: 0.5rem" round width="1rem" height="1rem" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg"/> -->
								<view style="padding: 0;height: 1.5rem;line-height: 1.55rem;overflow: hidden;margin: 0px;">{{product.categoryName}}石家庄直营</view>
						</view>
						<view align="left">
								<view>{{product.productName}}</view>
								<view>{{product.shopsName}}</view>
						</view>
						<view align="left">
							<view>
								<text style="color: goldenrod;background-color: #2c3e50;padding: 0.1rem">市场价</text>
								<text style="font-weight: bolder;font-size: 1rem">￥{{product.price}}</text>
							</view>													          
						</view>
				</view>
				</view>
	</view>
</template>

<script>
	
	import {getCateGoryList,selectProductByCateGoryType,getProductByCateGory,selectProductByCateGoryList} from '@/api/customer/local.js'
	export default {
		data() {
			return {
				swiper: [],
				navs: [{
						img: '../../static/tabs/1.png',
						title: '建房施工',
						path: '/pages/index_Buildingconstruction/index_Buildingconstruction'
					},
					{
						img: '../../static/tabs/2.png',
						title: '装修施工',
						path:'/pages/index_decorationprocess/index_decorationprocess'

					},
					{
						img: '../../static/tabs/3.png',
						title: '建房主材',
						path:'/pages/index_Houseadvocate/index_Houseadvocate'

					},
					{
						img: '../../static/tabs/4.png',
						title: '家庭建材',
						path:'/pages/index_familybuilding/index_familybuilding'

					},
					{
						img: '../../static/tabs/5.png',
						title: '免费质检',
						path:'/pages/index_freequality/index_freequality'
					},
					{
						img: '../../static/tabs/6.png',
						title: '免费图库',
						path:'/pages/index_Freegallery/index_Freegallery'
					},
					{
						img: '../../static/tabs/7.png',
						title: '施工攻略',
						path:'/pages/index_constructionstrategy/index_constructionstrategy'
					},
					{
						img: '../../static/tabs/8.png',
						title: '租赁服务',
						path:'/pages/index_leaseserve/index_leaseserve'
					},
					{
						img: '../../static/tabs/9.png',
						title: '同城安装',
						path:'/pages/index_sameinstallation/index_sameinstallation'
					},
					{
						img: '../../static/tabs/10.png',
						title: '金融支持',
						path:'/pages/index_financesupport/index_financesupport'
					}

				],
			}
		},
		onLoad() {

		},
		created() {
			this.getList()
			
		
		},
		methods: {
			//10个图标点击事件
			navItemClick(url) {
				console.log(url)
				uni.navigateTo({
					url
				})
			},
			//轮播图点击事件(拼团页面)
			groupbooking(){
				uni.navigateTo({
					url:'/pages/index_groupbooking/index_groupbooking'
				})
			},
			toCategory(){
				 console.log(11111)
				 uni.navigateTo({
				 	url:'/pages/index_category/index_category?typeid=1'
				 })			        
			   },
			   toDetails(id){
				   console.log(id)
					uni.navigateTo({
						url:"/pages/index_commodity_details/index_commodity_details?commodityId="+id
					})
			   },
			// onClick(name, title) {     //tab切换
			//        //console.log(name.detail.name)
			// 	   getProductByCateGory(35).then((res) => {
			// 		   console.log(res.data.data)					  
			// 			this.productCategory = res.data.data;
			// 	     });
				
			//  },
			 onClick(name){
			
			 	console.log(name)
				getProductByCateGory(name).then((res) => {
					console.log(res.data.data)					  
					this.productCategory = res.data.data;
				  });
			 },
			
			 		
					
			gitList(id){				
			   getProductByCateGory(id).then((res) => {
			   	console.log(res.data.data)					  
			   	this.productCategory = res.data.data;
			     });
			},
			// 查询建房主材类别列表
			      getList(){
					getCateGoryList("1").then(res=>{
						this.categorys = res.data.data
						this.id = res.data.data[0].categoryId
						this.gitList(this.id)
						console.log(this.categorys)
					})
			      }
		},
		components: {
			
		},


	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.site_seek {
		width: 95vw;
		height: 80rpx;
	}

	.seek {
		width: 480rpx;
		height: 72rpx;
		float: right;
		line-height: 40rpx;
		border-radius: 30rpx;
		background-color: rgba(255, 255, 255, 100);
		text-align: center;
		box-shadow: 4rpx 4rpx 12rpx 0rpx rgba(185, 184, 184, 40);
	}

	.seek image {
		float: left;
		margin: 20rpx;
		width: 30rpx;
		height: 30rpx;
	}

	.seek input {
		margin-top: 10rpx;
		width: 272rpx;
		text-align: left;
		height: 50rpx;
	}

	/* 业务分类 */
	.list {
		width: 750rpx;
		height: 300rpx;
	}

	.nav {
		width: 100vw;
		display: flex;
		display: -webkit-flex;
		flex-wrap: wrap;
	}

	.nav_item {
		width: 20%;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		margin-top: 40rpx;
		text-align: center;
	}

	.nav_item text {
		color: rgba(150, 150, 150, 100);
		font-size: 20rpx;
		text-align: left;
		margin: 0 auto;
		font-family: PingFangSC-regular;

	}

	.nav_item image {
		margin: 0 auto;
		width: 48rpx;
		height: 48rpx;

	}

	/* 轮播图 */
	swiper {
		width: 700rpx;
		height: 296rpx;
		margin-top: 20rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.commoditylist {
		width: 700rpx;


	}

	.commodityitem {
		width: 96vw;
		display: flex;
		display: -webkit-flex;
		flex-wrap: wrap;

	}

	.listone {
		width: 50%;
		margin-top: 20rpx;
	}

	.listone image {
		width: 350rpx;
		border-radius: 20rpx;
		height: 350rpx;
	}

	.twoan {
		width: 350rpx;
		height: 100rpx;
		margin-top: -90rpx;
		display: flex;
	}

	.twoan text {
		line-height: 54rpx;
	}

	.anone {
		width: 180rpx;
		height: 54rpx;
		line-height: 40rpx;
		border-radius: 20rpx;
		display: flex;
		color: rgba(16, 16, 16, 100);
		font-family: Arial;
		border: 1rpx solid rgba(187, 187, 187, 100);
	}
	.anone text{
		font-size: 15rpx;
		margin: 0 auto;
	}

	.antwo {
		width: 150rpx;
		height: 54rpx;
		line-height: 40rpx;
		border-radius: 20rpx;
		color: rgba(16, 16, 16, 100);
		display: flex;
		font-family: Arial;
		border: 1rpx solid rgba(187, 187, 187, 100);
	}

	.name {
		width: 350rpx;
		height: 50rpx;
	}

	.three {
		width: 350rpx;
		height: 50rpx;
		margin-top: 40rpx;
		color: rgba(126, 125, 125, 100);
		font-size: 28rpx;
		font-family: PingFangSC-regular;
	}
	.antwo text{
		font-size: 15rpx;
		margin: 0 auto;
		}

	.three image {
		width: 34rpx;
		height: 34rpx;
		margin-top: 20rpx;
	}
	.material-list{
	    position: relative;
	    text-align: left;
	  }
	  .material-list-grid{
	    display: inline-block;
	    padding: 1.5rem;
	  }
	  .material-list-grid P,span{
	    font-size: 0.5rem;
	    padding: 0.1rem 0;
	  }
	  .my-tabs {
	  	height: 88upx;
	  	font-size: 28upx;
	  	display: flex;
	  	justify-content: space-around;
	  	box-sizing: border-box;
	  	border-top: 2upx solid #dddddd;
	  	border-bottom: 2upx solid #dddddd;
	  	min-width: 100%;
	  	overflow-x: auto;
	  	
	  	.tab-item{
	  		line-height: 48upx;
	  		padding: 20upx;
	  		min-width: 100upx;
	  		text-align: center;
	  	}
	  	.tab-item.active{
	  		position: relative;
	  		color: #3682FF;
	  	}
	  	.tab-item.active::after{
	  		content: "";
	  		position: absolute;
	  		bottom: 0;
	  		left:50%;
	  		transform: translateX(-50%);
	  		width: 100%;
	  		border-bottom: 4upx solid #3682FF;
	  		animation: test ease 1 1.5s;
	  	}
	  }
	  .my-tabs.space-between{
	  	justify-content: space-between;
	  }
	  @keyframes test{
	  	0%{width: 100%}
	  	50%{width: 150%}
	  	100%{width: 100%}
	  }
</style>
